<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap-4.1.1-dist/css/bootstrap.min.css" >
    <!--引入外部css-->
    <link rel="stylesheet" href="css/index.css" >
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="bootstrap-4.1.1-dist/js/jquery-3.3.1.min.js"></script>
    <!---->
    <script src="bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    
    <link rel="icon" href="img/logo1.png" type="image/x-icon" />
    <link rel="shortcut icon" href="img/logo1.png" type="image/x-icon" />

    <script>
      $(function(){
        var $iframe = $("#mainif");

        //登记用户
        $("#enroll").click(function(){
          $iframe.attr("src","enroll.html");
        });

        //管理用户
        $("#manage").click(function(){
          $iframe.attr("src","manage.html");
        });

        //查询余额
        $("#balance").click(function(){
          $iframe.attr("src","balance.html");
        });

        // 查询消费
        $("#consume").click(function(){
          $iframe.attr("src","consume.html");
        });

        //查询充值
        $("#recharged").click(function(){
          $iframe.attr("src","recharged.html");
        });
        //在线充值
        $("#recharge").click(function(){
          $iframe.attr("src","recharge.html");
        });

        //挂失校园卡
        $("#belosed").click(function(){
          $iframe.attr("src","belosed.html");
        });

        //注销校园卡
        $("#cancel").click(function(){
          $iframe.attr("src","cancel.html");
        });

        //更多功能
        $("#more").click(function(){
          $iframe.attr("src","more.html");
        });

        //点击效果
        var $Lis = $("#sel li");
        $Lis.click(function(){
          $Lis.removeClass("active");
          $(this).addClass("active");
        });
      });
    </script>
    <title>校园卡管理系统-管理员</title>  
  </head>
  <body class="bg-light">
    <!--头-->
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
      <a class="navbar-brand" href="#">
        <img src="img/logo1.png" alt="Logo" style="width:70px;">
      </a>
      <ul id="sel" class="navbar-nav">
         <li id="enroll" class="nav-item active">
            <a class="nav-link" href="#">登记用户</a>
          </li>
          <li id="manage" class="nav-item">
            <a class="nav-link" href="#">管理用户</a>
          </li>
      </ul>
    </nav>

    <div id="maindrop" class="">
      <iframe id="mainif" src="enroll.html" frameborder="0" scrolling="no" allowfullscreen="yes" style="width: 100%;height: 100%;display: block;"></iframe>
    </div>

  </body>

</html>